<html !DOCTYPE>
    <head>
        <title>Beerdude</title>
        <link type="text/css" href="/static/css/main.css" rel="stylesheet" />	
        <script src="/static/js/jquery.min.js" ></script>
        <script src="/static/js/common.js" ></script>
    </head>
    <body>
        <div id="header">
            {% if user.is_authenticated %}
            <span class="greeting">Hi, {{ user.username }} <a href="/reviews?type=logout">(logout)</a></span>
            {% else %}
            <a class="login">Login</a>
            {% endif %}
            
        </div>
        <div id="tabs">
            {% for tab in tabs %}
            <a href="/{{ tab.0 }}" class="tab {% ifequal tab.0 currtab %}selected{% endifequal %}" id="{{ tab.0 }}">{{ tab.1 }}</a>
            {% endfor %}
            <input type="text" id="search_box" placeholder="Search for beer"/>
        </div>
        <div id="content">
            {% block content %}{% endblock %}
        </div>
        
    </body>
    <script>
        var beerdude = {
            is_auth : {{ user.is_authenticated|lower }}

        }
        $(document).ready(function(){
            $('.login').click(function(){
                var overlay_html, login_html, left
                overlay_html = '<div class="overlay"></div>';

                $('body').append(overlay_html);
                $('.overlay').css('width', $(document).width());
                $('.overlay').css('height', $(document).height());
                login_html = '<div id="login"><form method="POST" action="http://127.0.0.1:8000/">' + "{% csrf_token %}";
                login_html += '<span class="login_heading login">Login</span>';
                login_html += '<input name="email" type="text" class="login_input login" placeholder="Email" />';
                login_html += '<input name="password" type="password" class="login_input login" placeholder="Password" />';
                login_html += '<input type="hidden" name="type" value="login">';
                login_html += '<input type="submit" class="login button" value="Beer me!" />';
                login_html += '<span class="register_here ">Not registered yet? It\' easy.</span>';
                login_html += '</form></div>';
                
                $('body').append(login_html);
                left = $(document).width()/2 - $('#login').width()/2;
                $('#login').css('left',left);
                
             });
             $('.register_here').live('click',function(){
                var overlay_html, register_html, left 
                overlay_html = '<div class="overlay"></div>';
                $('.overlay').remove();
                $('#login').remove();


                $('body').append(overlay_html);
                $('.overlay').css('width', $(document).width());
                $('.overlay').css('height', $(document).height());
                register_html = "<div id=\"register\"><form method=\"POST\" action=\"http://127.0.0.1:8000/\">{% csrf_token %}";
                register_html += '<span class="register_heading register">Register</span>';
                register_html += '<input name="email" type="text" class="register_input register" placeholder="Email">';
                register_html += '<input name="username" type="text" class="register_input register" placeholder="Name">';
                register_html += '<input name="password" type="password" class="register_input register" placeholder="Password">';
                register_html += '<input type="password" class="register_input register" placeholder="Password">';
                register_html += '<input type="hidden" name="type" value="register">';
                register_html += '<input type="submit" class="button register" value="Beer me up!">';
                register_html += '</form></div>';

                $('body').append(register_html);
                left = $(document).width()/2 - $('#register').width()/2;
                $('#register').css('left',left);
             });


        });
    </script>


</html>
